﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>ImageToGreyscale Demo</title>
	<link type="text/css" rel="Stylesheet" href="../../../../src/log.css" />
	<style type="text/css" media="screen">
		/* PAGE STYLING - IGNORE */*
		{
			font-size: 1em;
		}
		body
		{
			margin: 0;
			padding: 0;
			background-color: #333333;
			text-align: center;
			font: 13px/20px "Helvetica Neue" ,Helvetica,Arial,sans-serif;
			background-color: #E5F9FF;
			height: 100%;
		}
		html
		{
			height: 100%;
			background-color: #333333;
			overflow: auto;
			background-color: #fff;
			-webkit-font-smoothing: antialiased;
			margin: 0;
			padding: 0;
		}
		h1
		{
			font-size: 2.3em;
			margin: 0;
			padding: 10px 0;
			-webkit-text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9),1px 1px 5px rgba(0, 0, 0, 0.3);
			-moz-text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9),1px 1px 5px rgba(0, 0, 0, 0.3);
			text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9),1px 1px 5px rgba(0, 0, 0, 0.3);
		}
		p
		{
			width: 400px;
			margin: auto;
			padding: 10px 0;
		}
		.demo-box
		{
			text-align: left;
			padding: 10px;
			width: 500px;
			border: 1px solid #b6b6b6;
			margin: 30px auto;
			background-color: #fff;
		}
		.demo-box h2
		{
			text-align: center;
			font-size: 1.5em;
			padding: 0;
			margin: 0;
		}
		.demo-box p
		{
			margin: auto;
			text-align: center;
		}
		p.breaker
		{
			clear: both;
		}
		code
		{
			border-top: 1px solid #CCC;
			border-bottom: 1px solid #CCC;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<h1>
		Image to Greyscale Demo</h1>
	<div class="demo-box">
		<h2>
			Converted Images</h2>
			<p>
				<img src="np.jpg" class="coloured-image" />
			</p>

			<p>
				<img src="np-stars.gif" class="coloured-image" />
			</p>
		<p>
			<code>Element.toGreyscale()</code> will turn your colourful images into greyscale
			versions in IE 6+ and any other browser that supports the HTML canvas tag
		</p>
		<p>
			<code>Element.toSaturated()</code> will return your images to their former glory!
		</p>
		<p>
			<strong><span style="font-size: 125%;">*Note:</span></strong> Non IE browsers will
			not convert the image if it is not being served from the same domain
		</p>
	</div>
	<script type="text/javascript" charset="utf-8" src="../../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../../src/demo/action/image/effect/greyscale.js"></script>
</body>
</html>
